<template>
  <div>
    <h1>政策法规</h1>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>动态标题</th>
          <th>发布时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(policy, index) in policies" :key="policy.id" @click="goToDetail(policy.id)" style="cursor: pointer;">
          <td><img src="/public/images/pic3.png" alt="政策法规图标" class="policy-icon" /> <!-- 固定 icon -->
        </td>
          <td>{{ policy.title }}</td>
          <td>{{ policy.publishDate }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';
import Mock from 'mockjs';
import { useRouter } from 'vue-router';

export default {
  data() {
    return {
      policies: [] // 政策法规数据
    };
  },
  created() {
    this.fetchPolicies();
  },
  methods: {
    fetchPolicies() {
      // 使用 Mock.js 模拟接口数据
      const data = Mock.mock({
        'policies|10': [{ // 模拟 10 条政策法规数据
          'id|+1': 1,
          title: '@title(5, 10)', // 政策法规标题
          publishDate: '@date("yyyy-MM-dd")', // 发布时间
          content: '@cparagraph(3)', // 政策法规内容
          attachment: '@pick(["附件1.pdf", "附件2.docx", "附件3.xlsx"])' // 附件名称
        }]
      });
      this.policies = data.policies;
    },
    goToDetail(id) {
      this.$router.push(`/policies/${id}`); // 跳转到详情页
    }
  }
};
</script>
<style scoped>
h1 {
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f0f0f0;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

tr:hover {
  background-color: #f5f5f5;
}

.policy-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
</style>